<template>
    <div style="width: 260px;height: 100%;">
        <div
                style="width: 250px;height: 100%;background-color: #ffffff;border-top-left-radius: 8px;border-top-right-radius: 8px;border: 1px solid #e1e1e1;">

            <div id="userheader" class="padding-margin-traslate"
                 :style="{paddingBottom:searchbox && searching?'8px':'0'}"
                 style="background-color: #41a1b7;border-top-left-radius: 8px;border-top-right-radius: 8px;">
                <div
                        style="cursor: pointer;;font-size: 12px;text-align: center;line-height: 24px;padding: 8px;justify-content:center;display: flex;"
                        @click="toggleSearchBox">
                    <i :style="{color:searching?'#ffffff':'#41a1b7'}" class="iconfont icon-huihua"></i><span
                        v-if="searching" style="color: #ffffff;margin-left: 4px;">共{{userCount}}个会话</span>
                </div>
                <div v-if="searchbox"
                     :style="{padding: searching?'0 8px':'30px 8px 0 8px',margin: searching?'0 8px':'-39px 1px 0 1px',borderRadius:searching?'4px':'8px 8px 0 0'}"
                     style="background-color: #065d71;color: #9ac6d0;font-size: 12px;text-align: center;line-height: 24px;"
                     class="padding-margin-traslate">
                    <div style="padding: 1px 0;word-break: break-all;"
                         :style="{display:searching?'none':'block'}" @click="startSearch">{{searchText.length ==
                        0?'点击搜索':searchText}}:共{{userCount}}个会话
                    </div>
                    <input v-model="searchText" name="searchContent" :style="{display:searching?'block':'none'}"
                           style="width: 100%;background-color: transparent;border: none;box-shadow: none;outline: none;text-align: center"
                           @blur="hideSearch"/>
                </div>
            </div>
            <div v-if="$route.name=='cancel'"
                 style="display: flex;align-items: center;justify-content: center;margin: 0;border-top: 1px solid white;">
                <div @click="isUser=false" class="tab" :class="isUser?'':'active'">会话分类</div>
                <div @click="isUser=true" class="tab" :class="isUser?'active':''">用户分类</div>
            </div>
            <div class="userlist" style="margin-top: 1px;"
                 :style="{height:(userListHeight+($route.name=='cancel'?-39:0))+'px'}">
                <ul>
                    <template v-for="(user,index) of filteredUsers">
                        <li :class="conversationIndex == index?'active':''"
                            @click="clickConversation(user,index)">
                            <div>
                            <img src="/imgs/default.png" width="35px" height="35px"
                                 style="border: 1px solid white;border-radius: 17.5px;"/>
                            </div>
                            <div style="margin-left: 8px;">
                                <div style="font-weight: bold;">{{user.userEntity.nickName}}</div>
                                <div class="hint" style="font-size: 9px;" v-if="$route.name == 'cancel'">
                                    <template v-if="user.startTime != null">会话时长：<br/>{{new
                                        Date(user.endTime).subdate(new Date(user.startTime))}}
                                    </template>
                                    <template v-else>未接受会话</template>
                                </div>
                            </div>
                            <div>
                            <span v-if="user.count > 0 && conversationIndex != index" class="badge" style="background-color: #e96161; color: #ffffff;">{{user.count > 99 ?('99+'):user.count}}</span>
                            </div>
                        </li>

                    </template>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>

    export default {
        name: 'Userbar',
        data () {
            return {
                isUser: false,
                searching: true,
                searchText: '',
                searchbox: false,
                conversations: [],
                userCount: 0,
                userListHeight: 74,
                conversationIndex: 0,
            }
        },
        props: ["conversation"],
        mounted: function () {
            this.userListHeight = $('#userbar').height() - 54;

            $(".userlist").mCustomScrollbar({
                autoHideScrollbar: true,
                theme: "minimal-dark"
            });
        },
        methods: {
            findCount: function (userId) {
                const that = this;
                setTimeout(function () {
                    for(let index in that.conversations){
                        let conversation = that.conversations[index];
                        let msgId = conversation.userEntity.messageId;
                        if(msgId == userId){
                            conversation.count = that.as.findCount(msgId);
                            that.$set(that.conversations, index ,conversation);
                        }
                    }
                })
            },
            findUserCount: function () {
                const that = this;
                setTimeout(function () {
                    for(let index in that.conversations){
                        if(index == 0)continue;
                        let conversation = that.conversations[index];
                        let msgId = conversation.userEntity.messageId;
                        conversation.count = that.as.findCount(msgId);
                        that.$set(that.conversations, index ,conversation);
                    }
                })
            },
            clickConversation: function (user, index) {
                this.conversationIndex = index;
                user.count = 0;
                this.$emit('update:conversation', user);
            },
            findConversation: function (stat) {
                const self = this;
                self.create = false;
                this.$emit('update:conversation', null);
                this.conversations = [];
                Pace.start();
                $.post('/conversation/list', {stat: stat, isUser: this.isUser}, function (conversations) {
                    Pace.stop();
                    self.conversations = conversations;
                    if (self.conversations.length > 0) {
                        self.$emit('update:conversation', self.conversations[0]);
                    }
                    if(stat == 1){
                        self.findUserCount();
                    }
                });
            },
            toggleSearchBox: function () {
                this.searchbox = !this.searchbox;
            },

            startSearch: function () {
                this.searching = true;
            },
            hideSearch: function () {
                this.searching = false;
                const that = this;
                setTimeout(function () {
                    that.userListHeight = $('#userbar').height() - $('.padding-margin-traslate').height() - 12;
                    $(".userlist").mCustomScrollbar('update');
                }, 300)
            },
        },
        computed: {
            filteredUsers: function () {
                const self = this;
                const users = self.conversations.filter(function (conversation) {
                    if (!conversation['userEntity']['nickName']) {
                        conversation['userEntity']['nickName'] = conversation['userEntity']['id'];
                    }
                    if (self.searchText) {
                        return conversation.userEntity.nickName.indexOf(self.searchText) !== -1
                    }
                    return true;
                });
                self.userCount = users.length;
                return users;
            }
        },
        watch: {
            isUser: function (isUser) {
                this.findConversation(2);
            },
            searching: function (searching) {
                if (this.searchbox && searching) {
                    setTimeout(function () {
                        $('input[name="searchContent"]')[0].focus();
                    }, 0)
                }
                if (searching && this.searchbox) {
                    this.userListHeight = $('#userbar').height() - 86;
                    $(".userlist").mCustomScrollbar('update');
                }
            },
            searchbox: function (searchbox) {
                this.searching = !searchbox;
                if (searchbox && !this.searching) {
                    this.userListHeight = $('#userbar').height() - 70;
                    $(".userlist").mCustomScrollbar('update');
                }
                if (!searchbox) {

                    this.userListHeight = $('#userbar').height() - 52;
                    $(".userlist").mCustomScrollbar('update');
                }
            }
        }
    }
</script>
